import React, {Component} from 'react'
import {observer} from 'mobx-react';
import { withRouter, Route, Link } from 'react-router-dom';
import {Tools, Icon} from 'weaver-mobile';
import { ListViewPage } from 'weaver-mobile-page';
import NoData from '../../coms/NoData';
import AdvanceSearchPage from '../../coms/AdvanceSearchPage';
const getLabel = Tools.getLabel;

@withRouter
@observer
export default class BasicList extends Component {
  render() {
    const {store, resourceId} = this.props;
    const { listViewStore, setCurrentPage, queryOutSignRecord, advanceSearchStore } = store;
    const { loading, hasMore, data } = listViewStore;
    const listViewPageProps = {
        style: {
            height: '100%'
        },
        store: listViewStore,
        onRefresh: () => queryOutSignRecord(resourceId),
        onEndReached: () => setCurrentPage(),
        renderFooter: () => {
            if (loading) {
                return (
                <div style={{ padding: 30, textAlign: 'center' }}>
                    Loading...
                </div>
                );
            } else if(data.length == 0){
                return (
                    <NoData />
                )
            } else if (!hasMore) {
                return (
                <div className='nomore'>
                    <span className='left' />
                    <span className='name'>{getLabel(390064, '没有更多啦')}</span>
                    <span className='right' />
                </div>
                );
            }
            return null;
        }
    }

    return (
        <div>
            <div className='header'>
                <div className='lbl'><div className=' text-elli'>{getLabel('16886','打卡记录')}</div></div>
                <div className='whitespace'>
                {
                    data.length >0 && <Icon type='attendance-punch-record' size='md' color='#55B1F9' />
                }
                {
                    data.length >0 && <div className='line' />
                }
                </div>
                <div className='content'>
                    <Link to={advanceSearchStore.path}><Icon type='filter-o' size='sm'/></Link>
                </div>
            </div>
            <div className='list' style={{background: data.length == 0 ? '#fff' : null}}>
                <ListViewPage.Normal {...listViewPageProps} />
            </div>
            
            <Route key={advanceSearchStore.id} 
                path={advanceSearchStore.path} 
                render={() => <AdvanceSearchPage store={advanceSearchStore} doSearch={() => setCurrentPage(1)}/>} />
        </div>
    )
  }
}